<template>
  <div v-loading="loading" style="height: 100%">
    <van-nav-bar left-arrow left-text="返回" title="生产投料信息" @click-left="goBack"/>
    <van-cell-group :v-model="tableData" style="
          overflow: scroll;
          height: 520px;
          ::-webkit-scrollbar {
            display: none;
          }
        ">
      <van-radio-group v-model="orderType">
        <van-cell-group inset>
          <van-cell clickable title="半成品投料"
                    @click="orderType = '1',tableData.productionno = '',tableData.packinglotno = ''">
            <template #right-icon>
              <van-radio name="1"/>
            </template>
          </van-cell>
          <van-cell clickable title="成品投料" @click="orderType = '2',tableData.productionno = ''">
            <template #right-icon>
              <van-radio name="2"/>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-row>
        <van-field v-if="orderType == '2'" v-model="tableData.packinglotno" label="包装批"/>
      </van-row>
      <van-row>
        <van-field v-model="tableData.productionlotno" label="生产批"/>
      </van-row>
      <van-row>
        <van-col span="20">
          <van-field v-model="tableData.productionno" label="生产工单" readonly/>
        </van-col>
        <van-col span="4">
          <van-button block
                      style="
                bottom: 0px; border: #3793fb solid 1px;
                border-radius: 2px;
                background-color: #3793fb"
                      @click="onBatchNo"
          >查询
          </van-button>
        </van-col>
      </van-row>
      <van-field ref="code_input" v-model="code_input" left-icon="scan"
                 placeholder="请扫描条码" style="border: solid 1px #3793fb; border-radius: 5px" @input="onScanCode"/>
      <van-row>
        <van-field v-model="tableData.materialno" label="物料编码" readonly/>
        <!--        <van-col span="14">-->
        <!--        </van-col>-->
        <!--        <van-col span="10">-->
        <!--        </van-col>-->
      </van-row>
      <van-row>
        <van-field v-model="tableData.specification" label="规格" readonly/>
      </van-row>
      <van-row>
        <van-field v-model="tableData.materialdes" label="物料描述" readonly/>
      </van-row>
      <van-row>
        <van-field v-model="tableData.customerlotno" label="客户批号" readonly/>
      </van-row>
      <!--      <van-swipe ref="swiper" style="border: solid #3793fb 1px;border-top:none" width="100%">-->
      <!--        <van-swipe-item v-for="(item, index) in tableData.bucket" :key="index">-->
<!--      <van-row style="border: solid 1px #3793fb; border-radius: 5px">-->
        <!--            <van-col span="24">-->
<!--        <el-autocomplete id="autocomplete" v-model="tableData.codeanddes" :fetch-suggestions="storageLocationSearch"-->
<!--                         :rules="{ required: true, message: '请选择库位', trigger: 'blur',-->
<!--                  }"-->
<!--                         label="库位" placeholder="库位" style="width: 100%;" value-key="codeanddes"-->
<!--                         @input="onInput"></el-autocomplete>-->
        <!--            </van-col>-->
<!--      </van-row>-->
      <van-row>
        <van-field v-model="tableData.codeanddes" label="库位" readonly/>
      </van-row>
      <van-row>
        <van-field v-model="tableData.locatquantity" label="库存数量" readonly/>
      </van-row>
      <van-row>
        <van-field v-model="tableData.totalquantity" label="投料数量"/>
      </van-row>
      <!--        </van-swipe-item>-->
      <!--      </van-swipe>-->
    </van-cell-group>
    <van-button block style="
          position: fixed;
          bottom: 0px;
          border: #3793fb solid 1px;
          border-radius: 2px;
          background-color: #3793fb;
          line-height: var(--footer-height);
        " type="primary" @click="dialogVisible = true">工单投料
    </van-button>
    <el-dialog
        :visible.sync="dialogVisible"
        title="是否工单投料"
        width="70%">
      <span>确定进行工单投料?</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: {
        orderType:"",
        productionno: "",
        bucket: [{}, {}, {}, {}, {}
        ],
      },
      storageLocationList: [],
      postingDate: this.getNowFormatDate(new Date()),
      loading: false,
      code_input: '',
      orderType: "1",//默认半成品
    };
  },
  mounted() {
    //获取库位List
    this.getStorageLocationList();
  },
  methods: {
    //返回
    goBack() {
      this.$router.push({
        path: "/HomePage",
      });
    },
    onScanCode(event) {
      this.getData(event);
    },
    async getData(codeInput) {
      let scanInfo = {
        code: codeInput + ',' + localStorage.getItem("plant"),
        productionno: this.tableData.productionno,
      };
      const {data: res} = await this.$http.post(
          "/ProductionFeedMat",
          scanInfo
      );
      // console.log("res", res)
      if (res.length) {
        this.tableData.materialno    = res[0].materialno;              //物料
        this.tableData.specification = res[0].specification;        //规格
        this.tableData.materialdes   = res[0].materialdes             //物料描述
        this.tableData.codeanddes    = res[0].codeanddes;              //库位
        this.tableData.customerlotno = res[0].customerlotno;              //供应商批次
        this.tableData.locatquantity = res[0].locatquantity;
        this.tableData.batchno       = res[0].batchno;
        this.code_input = '';
      } else {
        this.code_input = '';
        this.$toast.fail('条码信息错误');
      }
    },
    quantityChange() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.changeQty();
      }, 0);
    },
    changeQty() {
      var total = 0;
      for (let i in this.tableData.bucket) {
        if (this.tableData.bucket[i].noOfBarrels !== '' && this.tableData.bucket[i].noOfBarrels) {
          total += parseInt(this.tableData.bucket[i].noOfBarrels);
        }
      }
      this.tableData.totalquantity = total;
    },
    onInput() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        // console.log('输入的内容是：', value);
      }, 0);
    },
    //获取工单
    onBatchNo() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.getProductionNoList();
      }, 0);
    },
    async getProductionNoList() {
      let scanInfo = {};
      if (1 === this.orderType) {
        scanInfo = {
          orderType: this.orderType,
          productionLotNo: this.tableData.productionlotno,
        };
      } else {
        scanInfo = {
          orderType: this.orderType,
          productionLotNo: this.tableData.productionlotno,
          packingLotNo: this.tableData.packinglotno,
        };
      }
      const {data: res} = await this.$http.post(
          "/ProductionFeedBatchNo",
          scanInfo
      );
      this.tableData.productionno = res[0].productionno;
    },
    //库位搜索帮助
    storageLocationSearch(queryString, cb) {
      var storageLocationList = this.storageLocationList;
      var results = queryString
          ? storageLocationList.filter(this.createFilter(queryString))
          : storageLocationList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (storageLocation) => {
        return (
            storageLocation.codeanddes
                .toLowerCase()
                .indexOf(queryString.toLowerCase()) !== -1
        );
      };
    },
    async getStorageLocationList() {
      let scanInfo = {
        plant: localStorage.getItem("plant"),
      };
      const {data: res} = await this.$http.post(
          "/StorageLocationList",
          scanInfo
      );
      this.storageLocationList = res;
    },

    //生产投料
    onSubmit() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.postProductionFeed();
      }, 1000);
      this.dialogVisible = false;
    },

    //过账接口
    async postProductionFeed() {
      var requestData = this.tableData;
      let inputInfo = {
        orderType: this.orderType,              //1.半成品投料2.成品投料
        packingLotNo: requestData.packinglotno,        //包装批
        productionLotNo: requestData.productionlotno,  //生产批
        productionNo: requestData.productionno,         //生产工单
        materialNo: requestData.materialno,             //物料编码
        specification: requestData.specification,       //规格
        materialDes: requestData.materialdes,           //物料描述
        customerLotNo: requestData.customerlotno,       //客户批号
        totalQuantity: requestData.totalquantity,       //投料数量
        plant: localStorage.getItem("plant"),       //工厂
        persnumber: localStorage.getItem("erpId"),  //人员
        postdate: this.postingDate,                     //过账日期
        codeAndDes: requestData.codeanddes,             //库位
        locatQuantity: requestData.locatquantity,       //库位数量
        batchNo: requestData.batchno,       //批次
      };
      console.log("inputInfo", inputInfo)
      const {data: res} = await this.$http.post(
          "PostProductionFeed",
          inputInfo
      );
      var response = res[0];
      if (response.type == "S") {
        this.$toast.success(response.message);
        setTimeout(() => {
          this.$router.push("/HomePage");
        }, 1000);
      } else if (response.type == "E") {
        this.$message({
          message: response.message,
          type: "error",
        });
      } else {
        this.$message({
          message: "入库失败，请联系系统维护人员",
          type: "error",
        });
      }
    },

  },
}
</script>

<style>
.el-input__inner {
  border: 0px;
  outline: none;
}
</style>